<style>
  .product_price {
    font-size: 32px;
    font-weight: 700;
    line-height: 40px;
    margin-bottom: 24px;
 }
 @media screen and (max-width: 990px){
  .product_price {
    font-size: 24px;
    line-height: 32px;
    margin-bottom: 0;
  }
 }
</style>
<div class="slideshow-banner">
  <div class="swiper-father">
    <div class="swiper swiper-container tenways-index-slideshow">
        <div class="swiper-wrapper">
            {%- for block in section.blocks -%}
              {%- case block.type -%}
              {%- when 'image' -%}
                <div class="swiper-slide" {{ block.shopify_attributes }}>
                  {%- if block.settings.button_label != blank -%}               
                    <a{% if block.settings.button_link != blank %} href="{{ block.settings.button_link }}"{% endif %} class="no-underline"{% if block.settings.button_link == blank %} aria-disabled="true"{% endif %}>
                 {% endif %}
                  <div class="pc_banner slideshow__media banner__media media{% if block.settings.image == blank %} placeholder{% endif %}">
                    {%- if block.settings.image -%}
                      <img
                        srcset="{%- if block.settings.image.width >= 375 -%}{{ block.settings.image | image_url: width: 375 }} 375w,{%- endif -%}
                        {%- if block.settings.image.width >= 550 -%}{{ block.settings.image | image_url: width: 550 }} 550w,{%- endif -%}
                        {%- if block.settings.image.width >= 750 -%}{{ block.settings.image | image_url: width: 750 }} 750w,{%- endif -%}
                        {%- if block.settings.image.width >= 1100 -%}{{ block.settings.image | image_url: width: 1100 }} 1100w,{%- endif -%}
                        {%- if block.settings.image.width >= 1500 -%}{{ block.settings.image | image_url: width: 1500 }} 1500w,{%- endif -%}
                        {%- if block.settings.image.width >= 1780 -%}{{ block.settings.image | image_url: width: 1780 }} 1780w,{%- endif -%}
                        {%- if block.settings.image.width >= 2000 -%}{{ block.settings.image | image_url: width: 2000 }} 2000w,{%- endif -%}
                        {%- if block.settings.image.width >= 3000 -%}{{ block.settings.image | image_url: width: 3000 }} 3000w,{%- endif -%}
                        {%- if block.settings.image.width >= 3840 -%}{{ block.settings.image | image_url: width: 3840 }} 3840w,{%- endif -%}
                        {{ block.settings.image | image_url }} {{ block.settings.image.width }}w"
                        sizes="100vw"
                        src="{{ block.settings.image | image_url: width: 1500 }}"
                        loading="eager"
                        alt="{{ block.settings.image.alt | escape }}"
                        width="{{ block.settings.image.width }}"
                        height="{{ block.settings.image.width | divided_by: block.settings.image.aspect_ratio | round }}"
                      >
                    {%- else -%}
                      {{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
                    {%- endif -%}
                  </div>
                  <div class="image_mobile slideshow__media banner__media media{% if block.settings.image_mobile == blank %} placeholder{% endif %}">
                    {%- if block.settings.image_mobile -%}
                      <img
                        srcset="{%- if block.settings.image_mobile.width >= 375 -%}{{ block.settings.image_mobile | image_url: width: 375 }} 375w,{%- endif -%}
                        {%- if block.settings.image_mobile.width >= 550 -%}{{ block.settings.image_mobile | image_url: width: 550 }} 550w,{%- endif -%}
                        {%- if block.settings.image_mobile.width >= 750 -%}{{ block.settings.image_mobile | image_url: width: 750 }} 750w,{%- endif -%}
                        {%- if block.settings.image_mobile.width >= 1100 -%}{{ block.settings.image_mobile | image_url: width: 1100 }} 1100w,{%- endif -%}
                        {%- if block.settings.image_mobile.width >= 1500 -%}{{ block.settings.image_mobile | image_url: width: 1500 }} 1500w,{%- endif -%}
                        {%- if block.settings.image_mobile.width >= 1780 -%}{{ block.settings.image_mobile | image_url: width: 1780 }} 1780w,{%- endif -%}
                        {%- if block.settings.image_mobile.width >= 2000 -%}{{ block.settings.image_mobile | image_url: width: 2000 }} 2000w,{%- endif -%}
                        {%- if block.settings.image_mobile.width >= 3000 -%}{{ block.settings.image_mobile | image_url: width: 3000 }} 3000w,{%- endif -%}
                        {%- if block.settings.image_mobile.width >= 3840 -%}{{ block.settings.image_mobile | image_url: width: 3840 }} 3840w,{%- endif -%}
                        {{ block.settings.image_mobile | image_url }} {{ block.settings.image_mobile.width }}w"
                        sizes="100vw"
                        src="{{ block.settings.image_mobile | image_url: width: 750 }}"
                        loading="lazy"
                        alt="{{ block.settings.image_mobile.alt | escape }}"
                        width="{{ block.settings.image_mobile.width }}"
                        height="{{ block.settings.image_mobile.width | divided_by: block.settings.image_mobile.aspect_ratio | round }}"
                      >
                    {%- else -%}
                     {{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
                    {%- endif -%}
                  </div>
                  {%- if block.settings.button_label != blank -%}
                  </a>
                {% endif %}
                    {%  if block.settings.html != blank  %}
                    <div class="slideshow-content">
                      <div class="">
                         <div class="slideshow-html">
                            <div class="slideshow-height">
                           {%- form 'localization', id: 'FooterCountryForm', class: 'slideshow-colcumn' -%}
                                {% if localization.country.currency.symbol contains '$' and localization.country.currency.symbol != blank %}
                                     {% if block.settings.span_us != blank %}
                                        <span class="span">{{ block.settings.span_us }}</span>
                                      {%  endif  %}

                                    {% elsif localization.country.iso_code == 'GB' %}     
                                        {% if block.settings.span_uk != blank %}
                                        <span class="span">{{ block.settings.span_uk }}</span>
                                      {%  endif  %}       
                                 {% else %} 
                                      {% if block.settings.span != blank %}
                                        <span class="span">{{ block.settings.span }}</span>
                                      {%  endif  %}
                                  {% endif %}  
                                {%- endform -%} 
                              <div class="html">{{ block.settings.html }} 
                              {% if block.settings.tag != blank %}
                                <span>{{ block.settings.tag }}</span>
                              {%  endif  %}
                            </div>
                            {% if block.settings.text != blank %}
                              <div class="text">{{ block.settings.text }}</div>
                            {% endif %}
                             {% if block.settings.product != blank  %}
                              <div class="product_price">
                                {{ block.settings.product.price | money }}
                              </div>
                             {% endif %}
                            </div>
                        <div class="bottom">
                          {%- if block.settings.button_label != blank -%}
                        <a{% if block.settings.button_link != blank %} href="{{ block.settings.button_link }}"{% endif %} class="bg-button tenways-hover button{% if block.settings.button_style_secondary %} button--secondary{% else %} button--primary{% endif %}"{% if block.settings.button_link == blank %} aria-disabled="true"{% endif %}>
                        {{ block.settings.button_label | escape }}
                        </a>
                      {%- endif -%}  
                      {%- if block.settings.button_label_1 != blank -%}
                        <a{% if block.settings.button_link_1 != blank %} href="{{ block.settings.button_link_1 }}"{% endif %} class="no-bg tenways-hover{% if block.settings.button_style_secondary %} button--secondary{% else %} button--primary{% endif %}"{% if block.settings.button_link_1 == blank %} aria-disabled="true"{% endif %}>
                        {{ block.settings.button_label_1 | escape }}{% render 'icon-explore' %}
                        </a>
                      {%- endif -%}                  
                         
                       </div>
                         </div>
                      </div>
                     
                    </div>
                  {%  endif  %}
                  <div class="bottom">
                    {%- if block.settings.button_label != blank -%}
                  <a{% if block.settings.button_link != blank %} href="{{ block.settings.button_link }}"{% endif %} class="bg-button tenways-hover button{% if block.settings.button_style_secondary %} button--secondary{% else %} button--primary{% endif %}"{% if block.settings.button_link == blank %} aria-disabled="true"{% endif %}>
                  {{ block.settings.button_label | escape }}
                  </a>
                {%- endif -%}  
                {%- if block.settings.button_label_1 != blank -%}
                  <a{% if block.settings.button_link_1 != blank %} href="{{ block.settings.button_link_1 }}"{% endif %} class="no-bg tenways-hover{% if block.settings.button_style_secondary %} button--secondary{% else %} button--primary{% endif %}"{% if block.settings.button_link_1 == blank %} aria-disabled="true"{% endif %}>
                  {{ block.settings.button_label_1 | escape }}{% render 'icon-explore' %}
                  </a>
                {%- endif -%}          
                 </div>
                </div>
              {%- endcase -%}   
          {%- endfor -%}
        </div>
        <div class="page-width">
          <div class="slideshow-pagination">
            <div class="banner-swiper swiper-pagination"></div>
          </div>
        </div>
    </div>
  </div>
  <div class="buttom-serve tenways-service">
    <div class="page-width">
      <div class="swiper-father"> 
        <ul>
          {%- for block in section.blocks -%}
            {%- case block.type -%}
            {%- when 'column' -%}
              <li {{ block.shopify_attributes }}>
                  <div class="multicolumn-card__info">
                    <div class="mobeil_line">
                      {%- if block.settings.html != blank -%}
                      <div class="info">
                        <span>
                      {{ block.settings.html }}
                      </span>
                    </div>
                    {%- endif -%}
                    {%- if block.settings.title != blank -%}
                      <p>{{ block.settings.title | escape }}</p>
                    {%- endif -%}
                    </div>
                  </div>
              </li>
          {%- endcase -%}
        {%- endfor -%}
        </ul>
      </div>
    </div>
  </div>
</div>



{% assign image_block = section.blocks | where: "type", "image" %}
  <script >
  var swiper = new Swiper('.tenways-index-slideshow', {
    speed: 600,
    slidesPerView: 1,
    spaceBetween: 30,
    centeredSlides : true,
    loop: true,
    effect: 'fade',
    fadeEffect: {
      crossFade: true
    },
    autoplay: {
      delay: 5000,
      disableOnInteraction: false
    },
    pagination: {
      el: ".banner-swiper.swiper-pagination",
      clickable: true,
      renderBullet: function (index, className) {
      switch(index){
        {%- for block in image_block -%}
          case {{ forloop.index0 }}:text='<span class="name">{{ block.settings.name }}</span>';break;
        {%- endfor -%}   
      }
      return '<span class="' + className + '">' + text + '</span>';
    },
    },
  });
 </script>

{% schema %}
  {
    "name": "Index slideshow",
    "class": "index-slideshow spaced-section spaced-section--full-width",
    "tag": "section",
    "blocks": [
      {
        "type": "image",
        "name": "image",
        "settings": [
          {
            "type": "text",
            "id": "name",
            "label": "Product title"
          },
          {
          "type": "product",
          "id": "product",
          "label": "Product"
          },
          {
            "type": "image_picker",
            "id": "image",
            "label": "Image"
          },
          {
            "type": "image_picker",
            "id": "image_mobile",
            "label": "Image mobile"
          },
          {
            "type": "text",
            "id": "span_uk",
            "label": "Span uk"
          },
          {
            "type": "text",
            "id": "span_us",
            "label": "Span US"
          },
          {
            "type": "text",
            "id": "span",
            "label": "Span"
          },
          {
            "type": "html",
            "id": "html",
            "label": "Name"
          },
          {
            "type": "text",
            "id": "tag",
            "label": "Tag"
          },
          {
            "type": "text",
            "id": "text",
            "label": "Text"
          },
          {
            "type": "text",
            "id": "button_label",
            "default": "Button label",
            "label": "t:sections.image-with-text.blocks.button.settings.button_label.label",
            "info": "t:sections.image-with-text.blocks.button.settings.button_label.info"
            },
            {
            "type": "url",
            "id": "button_link",
            "label": "t:sections.image-with-text.blocks.button.settings.button_link.label"
            },
            {
            "type": "url",
            "id": "button_link_us",
            "label": "button link us"
            },
            {
            "type": "text",
            "id": "button_label_1",
            "default": "Button label",
            "label": "t:sections.image-with-text.blocks.button.settings.button_label.label",
            "info": "t:sections.image-with-text.blocks.button.settings.button_label.info"
            },
            {
            "type": "url",
            "id": "button_link_1",
            "label": "t:sections.image-with-text.blocks.button.settings.button_link.label"
            },
            {
            "type": "url",
            "id": "link_1_us",
            "label": "link_1_us"
            }
        ]
      },
      {
        "type": "column",
        "name": "column",
        "settings": [
          {
           "type": "html",
           "id": "html",
           "default": "html",
           "label": "html"
         },
         {
           "type": "text",
           "id": "title",
           "default": "Column",
           "label": "t:sections.multicolumn.blocks.column.settings.title.label"
         }
        ]
      }
    ],
    "presets": [
      {
        "name": "Index slideshow",
        "blocks": [
          {
            "type": "image"
          }, {
            "type": "image"
          }, {
            "type": "image"
          }
        ]
      }
    ]
  }
{% endschema %}